<template>
    <a-drawer
        width="50%"
        title="工程载荷管理"
        placement="left"
        :visible="modal_sensor_show"
        :maskClosable="false"
        :closable="false"
        :bodyStyle="{ padding: '0px' }"
        :zIndex="1001"
        >
        <template #extra>
        <a-tooltip  placement="bottom">
            <template #title>新建载荷</template>
            <a-button @click="add_sensor" style="margin: 0 auto;margin-right: 10px;">
                <template #icon><plus-outlined /></template>
            </a-button>
        </a-tooltip>
        <a-tooltip  placement="bottom">
            <template #title>选择已有载荷到工程</template>
            <a-button @click="select_sensor_bt" style="margin: 0 auto;margin-right: 10px;">
                <template #icon><select-outlined /></template>
            </a-button>
        </a-tooltip>
        <a-tooltip  placement="bottom">
            <template #title>保存载荷</template>
            <a-button @click="save_sensor" style="margin: 0 auto;margin-right: 10px;">
                <template #icon><check-outlined /></template>
            </a-button>
        </a-tooltip>
          <a-tooltip  placement="bottom">
              <template #title>关闭</template>
              <a-button @click="onClose" style="margin: 0 auto;margin-right: 10px;">
                <template #icon>
                    <close-outlined />
                </template>
              </a-button>
            </a-tooltip>
        </template>
        <div style="padding: 5px;width: 100%;">
            <a-row  style="width: 100%;" >
                <a-col :span="12" style="width: 100%;">
                    <a-form :model="nuform" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off" class="smale-form">
                        <a-form-item label="当前项目载荷">
                            <a-col :span="22" class="smale-select" >
                                <a-select 
                                v-model:value="active_sensor_name" 
                                style="width: 150px;" 
                                :options="$store.state.task?.sensors"
                                dropdownClassName="smale-select-span"
                                size="small" 
                                :field-names="{ label: 'name', value: 'name' }"
                                @change="sensor_change"
                                >
                                </a-select>
                            </a-col>
                            <a-col :span="2" class="smale-select" >
                                <a-tooltip  placement="bottom" v-if="active_sensor_name">
                                    <template #title>移除选择的载荷</template>
                                    <a-button @click="delete_sensor" style="margin: 0 auto;margin-right: 10px;">
                                        <template #icon><delete-outlined /></template>
                                    </a-button>
                                </a-tooltip>
                                
                            </a-col>
                        </a-form-item>
                    </a-form>
                </a-col>
            </a-row>
            <a-divider>载荷信息</a-divider>
            <div v-if="sensor_index>=0">
                <a-row  style="width: 100%;" >
                    <a-col :span="12" style="width: 100%;">
                        <a-form :model="nuform" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off" class="smale-form">
                            <a-form-item label="载荷类型">
                                <a-col :span="22" class="smale-select" >
                                    <a-select 
                                    v-model:value="$store.state.task.sensors[sensor_index].sensorInfo.attribute" 
                                    style="width: 150px;" 
                                    :options="$store.state.sensor_type"
                                    dropdownClassName="smale-select-span"
                                    size="small" 
                                    class="smale-select"
                                    :field-names="{ label: 'name', value: 'name' }">
                                    </a-select>
                                </a-col>
                                
                            </a-form-item>
                        </a-form>
                    </a-col>
                    <a-col :span="12" style="width: 100%;">
                        <a-form :model="nuform" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off" class="smale-form">
                            <a-form-item label="主距">
                                <a-col :span="22">
                                    <a-input v-model:value="$store.state.task.sensors[sensor_index].sensorInfo.f" />
                                </a-col>
                            </a-form-item>
                        </a-form>
                    </a-col>
                </a-row>
                <a-row  style="width: 100%;" >
                    <a-col :span="12" style="width: 100%;">
                        <a-row  style="width: 100%;" >
                            <a-col :span="8" style="width: 100%;">
                                <a-form :model="nuform" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" class="smale-form">
                                    <a-form-item label="CCD数量"></a-form-item>
                                    <a-form-item label="CCD阵列"></a-form-item>
                                </a-form>
                            </a-col>
                            <a-col :span="8" style="width: 100%;">
                                <a-form :model="nuform" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" class="smale-form">
                                    <a-form-item label="垂轨">
                                        <a-col :span="22">
                                            <a-input v-model:value="$store.state.task.sensors[sensor_index].sensorInfo.NumofCCDs.x" />
                                        </a-col>
                                    </a-form-item>
                                    <a-form-item label="宽">
                                        <a-col :span="22">
                                            <a-input v-model:value="$store.state.task.sensors[sensor_index].sensorInfo.CCDInfo.WidofCCD" />
                                        </a-col>
                                    </a-form-item>
                                </a-form>
                            </a-col>
                            <a-col :span="8" style="width: 100%;">
                                <a-form :model="nuform" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" class="smale-form">
                                    <a-form-item label="沿轨">
                                        <a-col :span="22">
                                            <a-input v-model:value="$store.state.task.sensors[sensor_index].sensorInfo.NumofCCDs.y" />
                                        </a-col>
                                    </a-form-item>
                                    <a-form-item label="高">
                                        <a-col :span="22">
                                            <a-input v-model:value="$store.state.task.sensors[sensor_index].sensorInfo.CCDInfo.HeiofCCD" />
                                        </a-col>
                                    </a-form-item>
                                </a-form>
                            </a-col>
                        </a-row>
                    </a-col>
                    <a-col :span="12" style="width: 100%;">
                        <a-row  style="width: 100%;" >
                            <a-col :span="8" style="width: 100%;">
                                <a-form :model="nuform" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" class="smale-form">
                                    <a-form-item label="探元大小"></a-form-item>
                                    <a-form-item label="左上角点(像素)"></a-form-item>
                                </a-form>
                            </a-col>
                            <a-col :span="8" style="width: 100%;">
                                <a-form :model="nuform" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off" class="smale-form">
                                    <a-form-item label="x">
                                        <a-col :span="22">
                                            <a-input v-model:value="$store.state.task.sensors[sensor_index].sensorInfo.CCDInfo.CCDSize.x" />
                                        </a-col>
                                    </a-form-item>
                                    <a-form-item label="x">
                                        <a-col :span="22">
                                            <a-input v-model:value="$store.state.task.sensors[sensor_index].sensorInfo.CCDInfo.LeftUpCoordInPixels.x" />
                                        </a-col>
                                    </a-form-item>
                                </a-form>
                            </a-col>
                            <a-col :span="8" style="width: 100%;">
                                <a-form :model="nuform" name="basic" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" autocomplete="off" class="smale-form">
                                    <a-form-item label="y">
                                        <a-col :span="22">
                                            <a-input v-model:value="$store.state.task.sensors[sensor_index].sensorInfo.CCDInfo.CCDSize.y" />
                                        </a-col>
                                    </a-form-item>
                                    <a-form-item label="y">
                                        <a-col :span="22">
                                            <a-input v-model:value="$store.state.task.sensors[sensor_index].sensorInfo.CCDInfo.LeftUpCoordInPixels.y" />
                                        </a-col>
                                    </a-form-item>
                                </a-form>
                            </a-col>
                        </a-row>
                    </a-col>
                </a-row>
                <a-divider>各片CCD或CMOS左上角点相对于第一片左上角点的垂轨关系(用英文逗号隔开):</a-divider>
                <a-row  style="width: 100%;" >
                    <a-col :span="24" style="width: 100%;">
                        <a-form :model="nuform" name="basic" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" autocomplete="off" class="smale-form">
                            <a-form-item label="x">
                                <a-col :span="22">
                                    <a-input v-model:value="$store.state.task.sensors[sensor_index].sensorInfo.CCDInfo.relativePos.x" />
                                </a-col>
                            </a-form-item>
                            <a-form-item label="y">
                                <a-col :span="22">
                                    <a-input v-model:value="$store.state.task.sensors[sensor_index].sensorInfo.CCDInfo.relativePos.y" />
                                </a-col>
                            </a-form-item>
                        </a-form>
                    </a-col>
                </a-row>
                <a-divider>安装矩阵(用英文逗号隔开):</a-divider>
                <a-row  style="width: 100%;" >
                    <a-col :span="24" style="width: 100%;">
                        <a-form :model="nuform" name="basic" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" autocomplete="off" class="smale-form">
                            <a-form-item label="矩阵:">
                                <a-col :span="22">
                                    <a-textarea v-model:value="$store.state.task.sensors[sensor_index].sensorInfo.installMatrix" />
                                </a-col>
                            </a-form-item>
                        </a-form>
                    </a-col>
                </a-row>
            </div>
            
        </div>
    </a-drawer>
    <a-drawer title="选择已存在载荷" 
    placement="right" 
    width="20%" 
    :closable="true" 
    :visible="sensor_select_drawer_visible"
    :maskClosable="false"
    :bodyStyle="{ padding: '0px' }"
    :maskStyle="{ display: 'none' }"
    :mask="false"
    @close="sensor_select_drawerclose" 
    class="my-drawer"
    :zIndex="1001"
    >
    <a-form :model="nuform" name="basic" :label-col="{ span: 8}" :wrapper-col="{ span: 16 }" autocomplete="off">
        <a-form-item label="选择载荷">
            <a-select 
            v-model:value="sensor_select_name" 
            style="width: 150px;" 
            :options="all_sensors"
            dropdownClassName="smale-select-span"
            size="small" 
            :field-names="{ label: 'name', value: 'name' }"
            >
            </a-select>
        </a-form-item>
    </a-form>
    </a-drawer>
    <input_name/>
</template>
<script>
import { defineAsyncComponent,watch, reactive } from 'vue'
export default {
    data() {
        return {
            modal_sensor_show: false,
            sensor_select_drawer_visible: false,
            sensor_select_name:"",
            all_sensors:[],
            active_sensor_name:"",
            sensor_index:-1,//index in this.$store.state.task?.sensors
            nuform:{},//无用 model form
            //mitt
            mitt_sensor_cfg_id:"",
            mitt_sensor_cfg_back_id:"",
            mitt_input_name_back_id:"",
        };
    },
    components: {
        input_name: defineAsyncComponent(() => import('@/components/common/input_name.vue')),
    },
    beforeUnmount() {
        this.$mitt.off('sensor_cfg',this.mitt_sensor_cfg_id);
        this.$mitt.off('input_name_back',this.mitt_input_name_back_id);
    },
    mounted() {
        this.modal_show=false
        this.mitt_sensor_cfg_id=this.$mitt.on('sensor_cfg',async (uid)  => {
            this.mitt_sensor_cfg_back_id=uid
            this.set_new_sensor()
            this.modal_sensor_show = true;
        });
        this.mitt_input_name_back_id=this.$mitt.on('input_name_back',(name)  => {
            this.add_sensor_back(name);
        },this?.$?.uid);
        this.set_new_sensor()
    },
    methods: {
        set_new_sensor(){
            this.sensor_index=-1;
            this.active_sensor_name=""
        },
        add_sensor(){
            this.$mitt.iemit('input_name', "",this?.$?.uid);
        },
        delete_sensor(){
            if(this.sensor_index>=0){
                this.$store.state.task.sensors.splice(this.sensor_index,1)
                this.set_new_sensor()
            }
        },
        add_sensor_back(name){
            let new_sensor={
                CCDInfo:{
                    CCDSize:{
                        x: "",
                        y: "",
                    },
                    HeiofCCD:"",
                    LeftUpCoordInPixels:{
                        x: "",
                        y: "",
                    },
                    WidofCCD:"",
                    relativePos:{
                        x: "",
                        y: "",
                    },
                },
                NumofCCDs:{
                    x: "",
                    y: "",
                },
                attribute:"",
                f:"",
                installMatrix:"",
            };
            let one_sensor_object={
                name:name,
                path:"",
                sensorInfo:new_sensor
            }
            if(this.$store.state.task?.sensors?.length>0){
                this.$store.state.task.sensors.push(one_sensor_object)
            }
            else{
                this.$store.state.task.sensors=[one_sensor_object]
            }
            this.active_sensor_name=name
            this.sensor_change()
        },
        sensor_change(){
            let find_sersor_index=this.$store.state.task.sensors?.findIndex((val)=>{
                return val?.name==this.active_sensor_name
            })
            if(find_sersor_index>=0){
                this.sensor_index=find_sersor_index
            }
        },
        async save_sensor(){
            console.log("save_sensor to task object")
            this.$Loading.start();
            let update_sensor_result=await this.$apis.update_sensor({
                val:JSON.stringify(this.$store.state.task.sensors)
            })
            let result=update_sensor_result?.result
            console.log(result)
            if(result){
                this.$message.success("更新载荷成功")
                this.$store.state.task.sensors=result
            }
            else{
                this.$message.error("更新载荷失败")
            }
            this.$Loading.done();
        },
        onClose(){
            this.modal_sensor_show=false
        },
        async select_sensor_bt(){
            let sensors=await this.$apis.get_sensor()
            this.all_sensors=sensors
            this.sensor_select_name="";
            this.sensor_select_drawer_visible=true
        },
        sensor_select_drawerclose(){
            this.sensor_select_drawer_visible=false
            if(this.sensor_select_name){
                let find_sersor_index=this.all_sensors?.findIndex((val)=>{
                    return val?.name==this.sensor_select_name
                })
                if(find_sersor_index>=0){
                    let sersor=this.all_sensors[find_sersor_index]
                    if(this.$store.state.task?.sensors?.length>0){
                        let find_sersor_exsit_index=this.$store.state.task?.sensors?.findIndex((val)=>{
                            return val?.name==sersor.name
                        })
                        if(find_sersor_exsit_index>=0){
                            this.$message.info("当前工程已经存在该载荷")
                        }
                        else{
                            this.$store.state.task.sensors.push(sersor)
                            this.sensor_index=this.$store.state.task.sensors?.length-1
                            this.active_sensor_name=sersor.name
                        }
                    }
                    else{
                        this.$store.state.task.sensors=[sersor]
                        this.sensor_index=this.$store.state.task.sensors?.length-1
                        this.active_sensor_name=sersor.name
                    }
                }
            }
        },
    },
};
</script>